<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>博客列表</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet"
          href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script
            src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script
            src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet"
          href="http://static.runoob.com/assets/foundation-icons/foundation-icons.css">
    <link rel="stylesheet" href="/css/common.css">
</head>
<body>
<div id="app" class="container">
    <div index="blog-blog" id="blog-head"></div>
    <div v-for="(item,index) in list" class="card center"
         style="margin-top: 1em;">
        <div  class="card-header">
            <h6 class="text-muted">{{item.createTime|formatDate('yyyy年MM月dd')}}</h6>
            <h5 @click="detail(index)" class="text-info pointer btn-link" v-text="item.title"></h5>
        </div>
<!--        <div @click="detail(index)" class="card-body pointer">{{item.simpleContent}}</div>-->
<!--        <div class="card-footer" align="right">-->
<!--            <span class="blank">{{item.createTime | formatDate}}</span> <span-->
<!--                class="fi-eye large blank"></span><span v-text="item.counts"></span><span-->
<!--                class="fi-heart large blank"></span><span v-text="item.counts"></span><span-->
<!--                class="blank pointer">赞</span>-->
<!--        </div>-->
    </div>
    <div class="center form-inline container-md" style="margin-top: 1em;">
        <div class="form-group">
            <ul class="pagination" style="padding-top: 1em;">
                <li class="page-item" @click="changePage(1)"><a
                        class="page-link">首页</a></li>
                <li class="page-item" @click="updatePage(true)"><a
                        class="page-link">上一页</a></li>

                <li class="page-item" @click="updatePage(false)"><a
                        class="page-link">下一页</a></li>
                <li class="page-item" @click="changePage(pageCount)"><a
                        class="page-link">尾页</a></li>
                <span class="blank" v-text="'第'+pageIndex+'页/共'+pageCount+'页'" style="padding-top: 0.5em;"></span>
            </ul>
        </div>
        <div class="form-group">

            <input type="text" class="form-control input-sm"
                   style="width: 5em; display: inline;" width="10px"
                   v-model="jumpIndex">
            <button @click="changePage(jumpIndex)"
                    style="display: inline; margin-left: 1em;"
                    class="btn btn-sm btn-primary">跳转
            </button>

        </div>
    </div>

</div>
</body>


<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.1/axios.min.js"></script>
<script src="/js/vue-filter.js"></script>
<script src="/js/loadHead.js"></script>
<script>
    new Vue({
        el: "#app",
        data: function () {
            return {
                list: [],
                pageIndex: 1,
                pageSize: 10,
                pageCount: 0,
                jumpIndex: 1,

            }
        },
        mounted() {
            this.changePage(1)
        },
        methods: {
            // 上一页下一页
            updatePage(up) {
                // 上一页
                let tmpPageIndex = this.pageIndex
                if (up) {
                    tmpPageIndex = tmpPageIndex - 1
                    if (tmpPageIndex < 1)
                        tmpPageIndex = this.pageCount
                } else {
                    tmpPageIndex = tmpPageIndex + 1
                    if (tmpPageIndex > this.pageCount)
                        tmpPageIndex = 1
                }
                this.freshPage(tmpPageIndex)
            },
            changePage(pageIndex) {
                this.freshPage(pageIndex)
            },
            freshPage(pageIndex) {
                var _this = this
                axios.get("/api/article/" + pageIndex + "/" + this.pageSize).then(response => {
                    this.db = response.data
                    _this.list = response.data.pageInfos
                    _this.pageCount = response.data.pageCount
                    _this.pageIndex = response.data.pageIndex
                    _this.jumpIndex = _this.pageIndex
                }).catch(error => {
                    alert("获取数据失败" + error)
                })

            },
            detail(index) {
                let title = this.list[index].title
                let articleId = this.list[index].id
                sessionStorage.setItem("articleId", articleId);
                sessionStorage.setItem("title", title);
                location.href = '/page/detail'
            }
        }
    })
</script>

</html>
